<template>
  <div class="row">
    <div
      v-for="item in classify"
      :key="item._id"
      :class="{active:item.classify==title}"
      @click="changeTitle(item.classify)"
      class="col"
    >{{item.classify}}</div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import axios from "axios";
export default {
  name: "ClassifyList",
  data() {
    return {
      classify: [],
      title: this.$route.query.title ? this.$route.query.title : "京东超市"
    };
  },
  methods: {
    ...mapActions(["filterShopList"]),
    changeTitle(e) {
      this.title = e;
      this.filterShopList(e);
    }
  },
  mounted() {
    if (this.$route.query.title) {
      this.filterShopList(this.$route.query.title);
    }
    axios.get("/getClassify").then(res => {
      this.classify = res.data;
    });
  }
};
</script>

<style scoped>
.row {
  width: 100%;
  background-color: #f6f6f6;
}
.col {
  width: 100%;
  height: 12.2666vw;
  font-size: 3.7333vw;
  text-align: center;
  line-height: 12.2666vw;
}
.active {
  color: red;
  background-color: #fff;
}
</style>